<template>
  <div class="cont">
    <div class="logo">
      <ul>
        <li class="iconfont">
          <img
            src=""
            alt=""
          />
        </li>
        <li>
          <img
            src=""
            alt=""
          />
        </li>
        <li class="iconfont" @click="handleclick">&#xe745;</li>
        <li class="iconfont" @click="handleClick">&#xe63f;</li>
        <li class="iconfont">&#xe66b;</li>
      </ul>
    </div>       
      <div class="border">
      <van-tabs v-model="activeName"
      line-width=".23rem"
      animated
      title-active-color="#ff6732">
        <van-tab 
        to="/carouse" exact
        title="推荐" name="a">
        </van-tab>
        <van-tab 
        to="/tiyan" exact
        title="体验套餐" name="b">
        </van-tab>
         <van-tab
         to="/kouqiang" exact
          title="口腔护理" name="c">
        </van-tab>
         <van-tab
         to="/yimiao" exact
          title="疫苗注射" name="d">
        </van-tab>
         <van-tab 
          to="/jiyin" exact
         title="基因检测" name="e">
        </van-tab>
         <van-tab title="健康好物" name="f">6
        </van-tab>
         <van-tab to="/products" title="体验超市" name="j">
        </van-tab>
      </van-tabs>

      <div class="neirong">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Tab, Tabs } from "vant";
import { Popup } from "vant";
import { Cell } from "vant";
import { Search } from "vant";
import { Toast } from "vant";


Vue.use(Search, Toast);

Vue.use(Cell);
Vue.use(Popup);
Vue.use(Tab);
Vue.use(Tabs);
export default {
  data() {
    return {
      activeName: "a",
      show: false,
      ShowHidden: false,
      value: "",
    };
  },
  mounted() {
    document.addEventListener("click", this.HiddenClick);
  },
  methods: {
    handleclick() {
      this.$router.push({
        path: "../search",
      })
    },
    handleClick(){
      this.$router.push('/cart')
    },
    showPopup() {
      this.show = true;
    },
    onSearch(val) {
      Toast(val);
    },
    onCancel() {
      Toast("取消");
    },

    getContainer() {
      return document.querySelector(".iconfont");
    },
    HiddenClick() {
      this.ShowHidden = false;
    },
    // 点击列表内，选中内容，并隐藏
    ConBtn(val) {
      alert("内容" + val);
      this.ShowHidden = false;
    },
  },
};
</script>

<style lang='stylus' scoped>
.iconfont button {
  outline: none;
}

.neirong
  height 100%
.cont {
  height: 100%;
}

.border {
  height: calc(100% - 0.5298rem);

  .neirong {
    height: 100%;
  }
}

.logo {
  height: 0.5298rem;

  ul {
    display: flex;
    padding: 0.0828rem 0.1656rem 0.0828rem 0.1656rem;

    li {
      font-size: 0.223rem;
      color: #3f3c3c;

      &:first-child {
        width: 0.26156rem;
        height: 0.23594rem;
        margin-right: 0.1028rem;

        img {
          width: 100%;
          height: 100%;
        }
      }

      &:nth-child(2) {
        height: 0.3519rem;
        flex: 1;

        img {
          height: 100%;
        }
      }

      &:nth-child(3) {
        padding: 0.03rem 0 0 0;
      }

      &:nth-child(4) {
        padding: 0.03rem 0.2rem 0 0.2rem;
      }

      &:nth-child(5) {
        padding: 0.03rem 0.05rem 0 0;
      }
    }
  }
}
</style>
<style lang='stylus' >
.van-tabs {
  margin-bottom: 0.06rem;
}

.search {
  height: 30%;
  display: none;
  position: fixed;
}

.iconfont {
  &:nth-child(3) {
    display: block;
  }
}
</style>
